<style lang="less">
  @import '../styles/common.less';
  @import './style/avatar.less';
</style>
<style>
  .dataDetail-div-img {
    width: 100%;
    text-align: center;
  }

  .dataDetail-div-img .user_img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-radius: 100%;
    min-height: 100px;
  }

  .dataDetail-div-img .name {
    width: 100%;
    height: 36px;
    line-height: 36px;
    text-align: center;
  }

  .Drawer-body-z-index .ivu-drawer-wrap, .Drawer-body-z-index .ivu-drawer-mask {
    z-index: 999999;
  }
</style>
<template>
  <div class="user-info-div" @click="">
    <Drawer :closable="false" width="400" v-model="userInfoDrawer" class="Drawer-body Drawer-body-z-index"
            @on-close="closeFun">
      <p class="Drawer_pStyle"></p>
      <div class="body">
        <Form label-position="top">
          <FormItem label="">
            <div class="dataDetail-div-img">
              <img :src="user_img" alt="头像" class="user_img">
              <div class="name" v-text="userInfo.name"></div>
            </div>
          </FormItem>
          <FormItem label="手机">
            <div class="dataDetail-div" v-text="userInfo.mobile"></div>
          </FormItem>
          <FormItem label="办公电话" v-if="userInfo.landline">
            <div class="dataDetail-div" v-text="userInfo.landline"></div>
          </FormItem>
          <FormItem label="性别">
            <div class="dataDetail-div" v-text="userInfo.sex == 'female' ? '女' : '男'"></div>
          </FormItem>
          <FormItem label="部门（岗位）" v-if="userInfo.departments && userInfo.departments.length > 0">
            <div class="dataDetail-div">
              <div v-for="el in userInfo.departments">
                <span v-text="el.name"></span>
                <span v-if="el.position.length > 0">
                  （ <span v-for="e in el.position" v-if="e.title" v-text="e.title + ' '"></span> ）
                </span>
              </div>
            </div>
          </FormItem>
          <FormItem label="身份" v-if="userInfo.station">
            <div class="dataDetail-div" v-text="userInfo.station.title"></div>
          </FormItem>
          <FormItem label="在职状态" v-if="userInfo.status">
            <div class="dataDetail-div" v-text="userInfo.status.title"></div>
          </FormItem>
          <FormItem label="">
            <div class="userDetail-div text-align-center" v-if="userInfo.username">
              <Button @click="toChatPage()" :disabled="is_nim == true ? false : true">发消息</Button>
            </div>
          </FormItem>
          <!--<FormItem label="" v-if="is_system == true">
            <div class="userDetail-div text-align-center">
              <Button @click="updateIM()" v-if="is_nim == false">开通IM服务</Button>
              <Button @click="updateIM()" v-if="is_nim == true">关闭IM服务</Button>
            </div>
          </FormItem>-->
        </Form>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../libs/util';
  import Utils from '../../libs/mod.utils';
  import String from '../../libs/mod.string';
  import Modal from '../../libs/mod.Modal';
  import Ckeditor from '../../libs/mod.ckeditor';
  import util from '@/libs/util.js';
  export default {
    name: 'userInfo',
    components: {},
    props: ['user_id', 'userInfoBackFun', 'isChat', 'toChatFun'],
    data () {
      return {
        uid: '',
        back_id: -1,
        userInfo: {},
        userInfoDrawer: false,
        show_user_id: '',
        show_user_name: '',
        show_user_img: '/vendors/images/person.png',
        show_is_chat: '',//chat
        user_img: Util.constant.personImg,
        is_nim: false,// 是否创建了im账户
        is_system: false,// 角色：平台管理员
      };
    },
    created: function () {
      var _this = this;
    },
    mounted () {
      var _this = this;
    },
    watch: {
      user_id: function () {
        var _this = this;
        _this.show_user_id = _this.user_id ? _this.user_id : '';
        _this.show_is_chat = _this.isChat ? _this.isChat : '';
        _this.getData();
        _this.getRoles();
      }
    },
    methods: {
      closeFun: function () {
        var _this = this;
        _this.$emit('userInfoBackFun', _this.back_id);
      },
      toChatPage: function () {
        var _this = this;
        if (_this.show_is_chat == 'chat') { // 在消息页面
          _this.$emit('toChatFun', _this.userInfo);
          _this.userInfoDrawer = false;
        } else {
          var username = _this.userInfo.username;
          sessionStorage.setItem('sid2chat', 'p2p-' + username);
          util.openNewPage(_this, 'chats_index');
          _this.$router.push({
            name: 'chats_index'
          });
          _this.userInfoDrawer = false;
        }
      },
      getData () {
        var _this = this;
        if (!(_this.show_user_id && _this.show_user_id > 0)) {
          return false;
        }
        var data = {
          id: _this.show_user_id,
        };
        var params = {
          url: '/user/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.userInfo = _data;
            var avatar = _data.avatar;
            if (avatar && avatar.thumb && avatar.thumb != '') {
              _this.user_img = avatar.thumb;
            } else {
              _this.user_img = Util.constant.personImg;
            }
            _this.is_nim = _data.nim_token == 1 ? true : false;
            _this.userInfoDrawer = true;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      // 是否为管理员
      getRoles () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
        };
        var params = {
          url: '/user/queryRoles',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            // 角色：平台管理员
            if (_data.indexOf('platform') > -1) {
              _this.is_system = true;
            } else {
              _this.is_system = false;
            }
          }
        }
      },
      // 开通、关闭IM服务
      updateIM: function () {
        var _this = this;
        var is_nim = _this.is_nim;
        var id = _this.userInfo.id;
        var username = _this.userInfo.username;
        var data = {
          uids: [id]
        };
        var url = '/user/NimToken';// 开通
        if (is_nim == true) {
          url = '/user/cancleToken';// 关闭
        }
        var params = {
          url: url,
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.getData();
          } else {
            _this.$Message.destroy();
            _this.$Message.error('提交失败!');
          }
        }
      },
    }
  };
</script>
